<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Data from GET Request</title>
</head>
<body>

<button id="sendRequestBtn">Send GET Request</button>

<!-- 添加一个元素来显示数据 -->
<div id="dataDisplay"></div>

<script>
   document.getElementById('sendRequestBtn').addEventListener('click', function() {
        const url = 'http://127.0.0.1:5012/gxl?name=耿雪龙'; // 注意这里我假设你根据需求修改了查询参数

        fetch(url, {
            method: 'GET',
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); // 解析JSON响应
        })
        .then(data => {
            // 假设data是服务器返回的JSON对象
            const displayDiv = document.getElementById('dataDisplay');
            // 清空之前的显示内容（如果有的话）
            displayDiv.innerHTML = '';

            // 创建一个HTML字符串来显示数据
            let htmlString = `<p>Message: ${data.msg}</p>`;
            htmlString += `<p>Name: ${data.name}</p>`;

            // 将HTML字符串设置为div的innerHTML
            displayDiv.innerHTML = htmlString;
        })
        .catch(error => {
            console.error('There was a problem with your fetch operation:', error);
            // 可以在这里添加错误处理逻辑，比如显示一个错误消息给用户
        });
    });
</script>

</body>
</html>